import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs'
import { STColumn } from '@delon/abc'

import { PageService } from '@shared/services/page.service'
import { ETabScrollStatus } from '@shared/enums'
import { IDeposit } from '@shared/interfaces/deposit'
import { DepositDataService } from '../../deposit-data.service'

@Component({
  selector: 'app-deposit-detail-tab-logs',
  templateUrl: './tab-logs.component.html',
})
export class DepositDetailTabLogsComponent implements OnInit {
  constructor(
    private pageService: PageService,
    private dataService: DepositDataService,
  ) {}

  columns: STColumn[]
  scroll = {
    x: '300px',
  }
  deposit$: Observable<IDeposit>

  ngOnInit() {
    this.deposit$ = this.dataService.depositDetail$.value$
    this.columns = this.createColumns()
    this.pageService.setTabScrollStatus(ETabScrollStatus.Scroll)
  }

  private createColumns(): STColumn[] {
    return [
      {
        title: '清算日期',
        i18n: 'GENERAL.INFO.OTHER.SETTLEMENT.DATE',
        index: 'settDate',
        className: 'text-center',
        width: '150px',
        fixed: 'left',
      },
      {
        title: '当日清算金额',
        i18n: 'OPERATION.DEPOSIT.SETTLED_AMT_OF_THE_DAY',
        type: 'currency',
        render: 'tplSettAmt',
        width: '200px',
      },
      {
        title: '实际收取',
        i18n: 'OPERATION.DEPOSIT.COLLECTED_AMT_OF_THE_DAY',
        type: 'currency',
        render: 'tplDepositAmt',
        width: '200px',
      },
      {
        title: '剩余金额',
        i18n: 'OPERATION.DEPOSIT.REMAINING_AMT',
        type: 'currency',
        render: 'tplRemainAmt',
        width: '200px',
      },
    ]
  }
}
